<template>
	<div ref="pageEl">
		<el-pagination
			class="page_wrap"
			:class="config.pagePosition"
			v-if="page"
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			:current-page="pageOption[config.pageKey]"
			:page-size="pageOption[config.sizeKey]"
			:total="pageOption[config.totalKey]"
			:page-sizes="config.pageSizes"
			:layout="config.pageLayout"
		></el-pagination>
	</div>
</template>

<script setup>
import { computed, ref } from "vue";
const emits = defineEmits(["pageChange"]);

const props = defineProps({
	page: { type: Boolean, default: true },
	pageConfig: { type: Object, default: () => ({}) }, //pageConfig:{pagePosition,pageKey,sizeKey,pageSizes,layout}
	pageOption: { type: Object, default: () => ({}) }
});

// page 配置
const config = computed(() => {
	return {
		pagePosition: props.pageConfig.pagePosition || "right",
		pageKey: props.pageConfig.pageKey || "currentPage",
		sizeKey: props.pageConfig.sizeKey || "pageSize",
		pageSizes: props.pageConfig.pageSizes || [10, 20, 50, 100],
		totalKey: "total",
		pageLayout:
			props.pageConfig.layout || "total, sizes, prev, pager, next, jumper"
	};
});

//分页
const handleSizeChange = (value) => {
	emitPageAsync({ currentPage: value });
	emits("pageChange", { ...pageAll, pageSize: value });
};
const handleCurrentChange = (value) => {
	emitPageAsync({ currentPage: value });
	emits("pageChange", { ...pageAll, currentPage: value });
};

const pageEl = ref(null);
defineExpose({ pageEl });
</script>

<style lang="less" scoped>
.page_wrap {
	padding: 10px 0;
	display: flex;
	&.left {
		justify-content: flex-start;
	}
	&.right {
		justify-content: flex-end;
	}
}
</style>
